<template>
  <div class="buttonstyle"> 
    <!-- 基本编辑表单 -->
    <el-form label-width="90px" label-position="left" size="small">
      <!-- 按钮基本属性 -->
      <el-divider content-position="left">基本属性</el-divider>
      
      <!-- 按钮文本 -->
      <el-form-item label="按钮文本">
        <el-input v-model="datas.buttonText" placeholder="请输入按钮文本"></el-input>
      </el-form-item>
      
      <!-- 按钮类型 -->
      <el-form-item label="类型">
        <el-select v-model="datas.type" placeholder="请选择按钮类型">
          <el-option label="主要按钮" value="primary"></el-option>
          <el-option label="成功按钮" value="success"></el-option>
          <el-option label="警告按钮" value="warning"></el-option>
          <el-option label="危险按钮" value="danger"></el-option>
          <el-option label="信息按钮" value="info"></el-option>
          <el-option label="文本按钮" value="text"></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 按钮尺寸 -->
      <el-form-item label="尺寸">
        <el-select v-model="datas.size" placeholder="请选择按钮尺寸">
          <el-option label="大号" value="large"></el-option>
          <el-option label="默认" value="default"></el-option>
          <el-option label="小号" value="small"></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 按钮状态 -->
      <el-form-item label="按钮状态">
        <el-select v-model="buttonStyleType" placeholder="请选择按钮样式" style="width: 100%;">
          <el-option label="默认按钮" value="normal"></el-option>
          <el-option label="朴素按钮" value="plain"></el-option>
          <el-option label="圆角按钮" value="round"></el-option>
          <el-option label="圆形按钮" value="circle"></el-option>
          <el-option label="禁用按钮" value="disabled"></el-option>
        </el-select>
        <div class="form-hint" v-if="datas.circle">圆形按钮将只显示图标，请在下方设置</div>
      </el-form-item>
      
      <!-- 图标设置 -->
      <el-form-item label="显示图标">
        <el-switch v-model="showIcon" :disabled="datas.circle"></el-switch>
        <span class="hint-text" v-if="datas.circle">圆形按钮必须有图标</span>
      </el-form-item>
      
      <!-- 以下内容仅在有图标时或圆形按钮时显示 -->
      <template v-if="showIcon || datas.circle">
        <el-form-item label="图标位置" v-if="!datas.circle">
          <el-radio-group v-model="datas.iconPosition">
            <el-radio label="left">图标在左</el-radio>
            <el-radio label="right">图标在右</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item :label="datas.circle ? '按钮图标' : '图标选择'">
          <el-select v-model="datas.icon" placeholder="请选择图标">
            <el-option label="编辑" value="Edit"></el-option>
            <el-option label="删除" value="Delete"></el-option>
            <el-option label="搜索" value="Search"></el-option>
            <el-option label="设置" value="Setting"></el-option>
            <el-option label="添加" value="Plus"></el-option>
            <el-option label="保存" value="DocumentAdd"></el-option>
            <el-option label="上传" value="Upload"></el-option>
            <el-option label="下载" value="Download"></el-option>
          </el-select>
        </el-form-item>
      </template>
      
      <!-- 事件设置 -->
      <el-divider content-position="left">事件设置</el-divider>
      
      <el-form-item label="点击事件">
        <el-input 
          v-model="datas.clickHandler" 
          placeholder="请输入点击事件处理函数名 例如: handleButtonClick"
          type="textarea"
          rows="5"
        ></el-input>
      </el-form-item>
      
      <!-- 自定义样式 -->
      <el-divider content-position="left">自定义样式</el-divider>
      
      <el-form-item label="自定义颜色">
        <el-switch v-model="customColor"></el-switch>
      </el-form-item>
      
      <template v-if="customColor">
        <el-form-item label="背景颜色">
          <el-color-picker v-model="datas.backgroundColor"></el-color-picker>
        </el-form-item>
        
        <el-form-item label="文字颜色">
          <el-color-picker v-model="datas.textColor"></el-color-picker>
        </el-form-item>
        
        <el-form-item label="边框颜色">
          <el-color-picker v-model="datas.borderColor"></el-color-picker>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'buttonstyle',  // 修正为组件名+style
  props: {
    datas: {
      type: Object,
      required: true,
      default: () => ({})
    },
    'data-type': String
  },
  data() {
    return {
      showIcon: false,
      customColor: false,
      buttonStyleType: 'normal' // 默认为普通按钮
    }
  },
  created() {
    // 初始化默认值
    if (!this.datas.buttonText) this.datas.buttonText = '按钮';
    if (!this.datas.type) this.datas.type = 'primary';
    if (!this.datas.size) this.datas.size = 'default';
    
    // 初始化控制变量
    this.showIcon = !!this.datas.icon;
    
    // 默认不启用自定义颜色
    this.customColor = false;
    
    // 如果没有启用自定义颜色，清除颜色相关属性
    if (!this.customColor) {
      this.datas.backgroundColor = undefined;
      this.datas.textColor = undefined;
      this.datas.borderColor = undefined;
    }
    
    // 根据当前按钮状态初始化buttonStyleType
    this.initButtonStyleType();
  },
  watch: {
    showIcon(val) {
      if (!val) {
        this.datas.icon = undefined;
        this.datas.iconPosition = undefined;
      } else if (!this.datas.icon) {
        this.datas.icon = 'Edit';
        this.datas.iconPosition = 'left';
      }
    },
    customColor(val) {
      if (!val) {
        this.datas.backgroundColor = undefined;
        this.datas.textColor = undefined;
        this.datas.borderColor = undefined;
      } else {
        this.datas.backgroundColor = '#409EFF';
        this.datas.textColor = '#FFFFFF';
        this.datas.borderColor = '#409EFF';
      }
    },
    buttonStyleType(val) {
      // 首先重置所有状态
      this.datas.plain = false;
      this.datas.round = false;
      this.datas.circle = false;
      this.datas.disabled = false;
      
      // 根据选择的样式类型更新单个按钮状态
      switch(val) {
        case 'normal':
          // 保持所有状态为false
          break;
        case 'plain':
          this.datas.plain = true;
          break;
        case 'round':
          this.datas.round = true;
          break;
        case 'circle':
          this.datas.circle = true;
          // 圆形按钮强制显示图标
          this.showIcon = true;
          if (!this.datas.icon) {
            this.datas.icon = 'Edit';
          }
          break;
        case 'disabled':
          this.datas.disabled = true;
          break;
      }
    }
  },
  methods: {
    // 根据当前按钮状态初始化buttonStyleType
    initButtonStyleType() {
      // 确保属性为布尔类型
      this.datas.plain = this.toBooleanValue(this.datas.plain);
      this.datas.round = this.toBooleanValue(this.datas.round);
      this.datas.circle = this.toBooleanValue(this.datas.circle);
      this.datas.disabled = this.toBooleanValue(this.datas.disabled);
      
      // 使用简单条件判断，只检查单个状态
      if (this.datas.plain) {
        this.buttonStyleType = 'plain';
      } else if (this.datas.round) {
        this.buttonStyleType = 'round';
      } else if (this.datas.circle) {
        this.buttonStyleType = 'circle';
      } else if (this.datas.disabled) {
        this.buttonStyleType = 'disabled';
      } else {
        this.buttonStyleType = 'normal';
      }
    },
    // 转换各种类型值为布尔值
    toBooleanValue(value) {
      if (value === 'true' || value === true) return true;
      if (value === 'false' || value === false) return false;
      return false; // 默认为false
    }
  }
}
</script>

<style scoped>
.buttonstyle {
  width: 100%;
  box-sizing: border-box;
}

h2 {
  padding: 20px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #f2f4f6;
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

.form-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

:deep(.el-form-item__content) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

:deep(.el-checkbox) {
  margin-right: 15px;
}

:deep(.select-label) {
  color: #606266;
  margin-right: 5px;
}

.hint-text {
  margin-left: 8px;
  font-size: 12px;
  color: #909399;
}
</style> 